<template>
	<view>
		<view class="small-my-header">
			<image :src="user.avatar"></image>
			<view class="small-my-user-box">
				<view class="small-my-user-left" v-if="user.consultant === 1">
					<view>
						<image src="../../static/img/my/my_vip_logo.png"></image>
						美丽顾问
					</view>
					<view class="font-color">团队收益：{{ user.ggrMoney || 0 }}</view>
				</view>
				<view class="small-my-user-left" v-else-if="user.consultant === 2">
					<view>
						<image src="../../static/img/my/my_vip_logo.png"></image>
						推广顾问
					</view>
					<view class="font-color">团队收益：{{ user.ggrMoney || 0 }}</view>
				</view>
				<view class="small-my-user-left" v-else-if="user.consultant === 3">
					<view>
						<image src="../../static/img/my/my_vip_logo.png"></image>
						高级顾问
					</view>
					<view class="font-color">团队收益：{{ user.ggrMoney || 0 }}</view>
				</view>
				<view class="small-my-user-right row row-middle" @click="routerJump('my_setting')">
					<image src="../../static/img/my/my_setting.png"></image>
					设置
				</view>
			</view>
			<view class="small-my-user-info-box">
				<view>{{ user.nickName }}</view>
				<view>{{ user.mobile }}</view>
			</view>
			<view class="small-my-all-order-box row">
				<view class="row row-column row-middle" @click="routerJump('my_order?status=2,3')">
					<image src="../../static/img/my/my_to_send_the_goods.png"></image>
					<text>待发货</text>
					<view class="tip-number" v-if="user && tipNum.shipment">{{tipNum.shipment}}</view>
				</view>
				<view class="row row-column row-middle" @click="routerJump('my_order?status=1')">
					<image src="../../static/img/my/my_obligation.png"></image>
					<text>待付款</text>
					<view class="tip-number" v-if="user && tipNum.obligation">{{tipNum.obligation}}</view>
				</view>
				<view class="row row-column row-middle" @click="routerJump('my_order?status=4')">
					<image src="../../static/img/my/my_delivered.png"></image>
					<text>已发货</text>
					<view class="tip-number" v-if="user && tipNum.shipped">{{tipNum.shipped}}</view>
				</view>
				<view class="row row-column row-middle" @click="routerJump('my_order?status=1,2,3,4,5,6,7,8')">
					<image src="../../static/img/my/my_all_orders.png"></image>
					<text>全部订单</text>
				</view>
			</view>
		</view>
		<image src="../../static/img/my/my_wallet.png" @click="routerJump('my_wallet')"></image>
		<view class="small-my-menu-box">
			<view class="small-my-menu-item-box row row-between-wrapper" @click="routerJump('my_coupons')">
				<view class="row row-middle">
					<image src="../../static/img/my/my_coupon.png"></image>
					<view>优惠券</view>
				</view>
				<image src="../../static/img/common_more.png"></image>
			</view>
			<view class="small-my-menu-item-box row row-between-wrapper">
				<view class="row row-middle">
					<image src="../../static/img/my/my_service.png"></image>
					<view>在线客服</view>
				</view>
				<image src="../../static/img/common_more.png"></image>
			</view>
			<view class="small-my-menu-item-box row row-between-wrapper">
				<view class="row row-middle">
					<image src="../../static/img/my/my_phone.png"></image>
					<view>绑定手机</view>
				</view>
				<image src="../../static/img/common_more.png"></image>
			</view>
		</view>
		<view><button type="primary" open-type="getUserInfo" @getuserinfo="login">登入</button></view>
		<van-toast id="van-toast" />
	</view>
</template>

<script>
import http from '../../api/api.js';
import Toast from '../../wxcomponents/vant/vant-weapp/toast/toast.js';
import util from '../../static/js/util.js'
export default {
	data() {
		return {
			user: {},
			tipNum:{}
		};
	},
	onLoad() {
		try{
			let userId = uni.getStorageSync('userId');
			this.getUserInfo(userId);
		}catch(e){
			//TODO handle the exception
		}
	},
	methods: {
		getUserInfo(userId) {
			http.getUserInfo({ userId: userId }).then(res => {
				if (res.data.code === 1) {
					this.user = res.data.data;
				}
			});
			http.getTipNumber({ userId: userId }).then(res => {
				if (res.data.code === 1) {
					this.tipNum = res.data.data;
				}
			});
		},
		routerJump(routerName) {
			uni.navigateTo({
				url: routerName
			});
		},
		login(e){
			if(e.detail.errMsg === "getUserInfo:ok"){
				uni.setStorageSync('userInfo', e.detail.userInfo);
				let userInfo = uni.getStorageSync('userInfo');
				let sessionKey = uni.getStorageSync('sessionKey');
				let encryptedData = e.detail.encryptedData;
				let iv = e.detail.iv;
				http.decode({
					encryptedData:encryptedData,
					sessionKey:sessionKey,
					iv:iv
				}).then(res => {
					uni.setStorageSync('unionId', res.data.unionId);
					http.register({
						unionid:res.data.unionId,
						avatar:userInfo.avatarUrl,
						nickName:userInfo.nickName,
					}).then(res => {
						if(res.data.code === 1){
							uni.setStorageSync('userId', res.data.data.userId);
							uni.setStorageSync('jwtrandomKey', res.data.data.jwtrandomKey);
							uni.setStorageSync('jwttoken', res.data.data.jwttoken);
							let sign = util.my_md5().get(res.data.data.jwttoken, res.data.data.jwtrandomKey);
							uni.setStorageSync('sign', sign)
						}
					})
				})
			}else{
				Toast.fail('登入失败');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../common/mixins';
.small-my-header {
	height: 440upx;
	background-image: url(http://mall.sylady.net/title/uploadImg/small/img/my_bg.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: relative;
	> image {
		width: 160upx;
		height: 160upx;
		border-radius: 50%;
		border: solid 4upx #f1dbb8;
		position: absolute;
		left: calc(50% - 80upx);
		top: 60upx;
	}
}
.small-my-user-box {
	color: white;
	padding: 30upx;
	overflow: hidden;
}
.small-my-user-left {
	float: left;
	image {
		margin-right: 10upx;
		width: 40upx;
		height: 40upx;
	}
}
.small-my-user-right {
	float: right;
	> image {
		margin-right: 10upx;
		width: 50upx;
		height: 50upx;
	}
}
.small-my-user-info-box {
	text-align: center;
	position: absolute;
	bottom: 120upx;
	left: 0;
	right: 0;
	> view {
		font-weight: 600;
		letter-spacing: 1upx;
	}
}
.small-my-all-order-box {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	> view {
		width: 25%;
		position: relative;
		> image {
			width: 70upx;
			height: 70upx;
		}
	}
}
.tip-number {
	width:40upx;
	height:40upx;
	line-height: 40upx;
	z-index: 1;
	position: absolute;
	background-color: #ff6565;
	border-radius: 50%;
	top: -20upx;
	left: 52%;
	color: white;
	font-weight: 100;
	text-align: center;
	font-size: 24upx;
}
.small-my-header + image {
	display: block;
	width: 95%;
	margin: 20upx auto;
	height: 120upx;
}
.small-my-menu-box {
	@include box;
}
.small-my-menu-item-box {
	height: 90upx;
	> view {
		position: relative;
		> image {
			width: 44upx;
			height: 44upx;
		}
		& + image {
			width: 20upx;
			height: 20upx;
		}
		:nth-child(2) {
			margin-left: 20upx;
		}
	}
}
</style>
